<template>
    <div>
        <div class="usertitle">用户管理</div>
        <div>
            <el-table :data="users.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
                <el-table-column label="用户头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.img" fit="contain" style="width: 100px; height: 100px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="用户名"></el-table-column>
                <el-table-column prop="gender" label="性别"></el-table-column>
                <el-table-column prop="sign" label="签名"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button @click="handleDelete(scope.row.uid)" type="danger">封禁</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog width="38%" title="修改信息" :visible.sync="userVisible" append-to-body>
                <el-form :model="user">
                    <el-form-item label="用户名:" :label-width="formLabelWidth">
                        <el-input v-model="user.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:" :label-width="formLabelWidth">
                        <el-input v-model="user.gender"></el-input>
                    </el-form-item>
                    <el-form-item label="签名:" :label-width="formLabelWidth">
                        <el-input v-model="user.sign"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="editUser(user.uid)">修改</el-button>
            </el-dialog>
            <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page.sync="currentPage">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "one",
    data() {
        return {
            pageSize: 5, // 每页显示数量
            currentPage: 1, // 当前页数
            total: 50, // 总数据量
            users: [],
            user: {},
            userVisible: false
        };
    },
    methods: {
        //获取用户信息
        getuserdata() {
            const username = localStorage.getItem("username");
            fetch(`http://localhost:3000/userdata`, {
                method: 'GET'
            })
                .then(res => res.text())
                .then(res => {
                    this.users = JSON.parse(res)
                });
        },
        //编辑用户信息
        handleEdit(index) {
            this.user = Object.assign({}, index);
            this.userVisible = true;
            // console.log(this.user);
        },
        editUser(uid) {
            this.innerVisible = false;
            fetch(`http://localhost:3000/user/${uid}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    nickname: `${this.user.nickname}`,
                    gender: `${this.user.gender}`,
                    sign: `${this.user.sign}`,
                })
            }).then(() => {
                this.getuserdata();
            })
            // location.reload();
            this.$message.success('修改成功')
            this.userVisible = false;
        },
        //删除用户
        handleDelete(uid) {
            console.log(uid)
            fetch(`http://localhost:3000/delete/${uid}`, {
                method: 'POST'
            })
                .then(res => {
                    if (res.status == 200) {
                        alert('封禁成功')
                    }
                })
                .then(() => {
                    this.getuserdata();
                })
            // location.reload();
        },
    },
    mounted() {
        this.getuserdata();
        // setInterval(() => {
        //     this.getuserdata();
        // }, 1000);
    },
};
</script>
<style>
.usertitle {
    width: 200px;
    height: 50px;
    font-size: 30px;
    font-weight: bold;
    color: black;
    margin-left: 1%;
    margin-top: 5%;
}
</style>